<template>
    <div id='register-main'>
        <div id="register">
            <div id="register-title">
                <span>muke micro cloud</span>
            </div>
            <el-form :model="user" :rules="rules" ref="user"  class="demo-ruleForm">
                <el-form-item  prop="mail"  required>
                    <el-input type="text" prefix-icon='el-icon-user-solid' v-model="user.mail"  placeholder="邮箱" ></el-input>
                </el-form-item>
                <el-form-item  prop="code"  required>
                    <el-input type="text" prefix-icon='el-icon-user' v-model="user.code"  placeholder="验证码" >
                        <el-button @click="sendCode('user')" id='valid-code' :disabled='disabled'
                            slot="append" style="width:120px;color:#66a6ff" >
                        <span v-if="!disabled" >{{loading ? '发送中' : '发送验证码'}}</span>
                        <span v-if="disabled">{{count}}s重新发送</span>    
                        </el-button>
                    </el-input>
                    
                </el-form-item>
                <el-form-item prop="pwd" required>
                    <el-input type="password" prefix-icon='el-icon-lock' v-model="user.pwd" placeholder="密码"></el-input>
                </el-form-item>
                <el-form-item >
                    <el-button id="loginBtn"  style="width:100%" :loading="loading" type="primary" @click="register('user')">{{ loading ? '注册中 ...' : '注 册' }}</el-button>
                </el-form-item> 
            </el-form>
            <span style="font-size:15px;font-weight:600;float:right">已有账号<i class="el-icon-question"></i>  
                <a href="/#/login"> 去登录 </a></span>
        </div>

    </div>
</template>

<script>
import util from '../../utils/util';
export default {

    data() {
      return {
        user: {
          mail: '',
          code: '',
          pwd: ''
        },
        disabled: false,
        count: 180,
        rules: {
          mail: [
            { required: true, message: '请输入邮箱', trigger: 'blur' },
            { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
          ],
          code: [
            { required: true, message: '请输入验证码', trigger: 'blur' },
            { min: 6, max: 20, message: '长度为 6 个字符', trigger: 'blur' }
          ],
          pwd: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 20, message: '长度在 6 到 20个字符', trigger: 'blur' }
          ]
        },
        loading:false
      };
    },
    methods:{
        // 发送验证码
        sendCode(userData){
            this.$refs[userData].validateField('mail',(valid) => {
                if(valid === "") {
                    this.loading = true;
                    // 校验通过
                    this.$axios.get(util.API_HOST + '/user/mail/send/code?toMail='
                    + this.user.mail).then(response => {
                        let result = response.data;
                        if(result.code === 200){
                            this.loading = false;
                            this.disabled = true;
                            this.timeCount();
                            this.$notify.success({
                                title:'验证码发送成功',
                                message:result.message
                            })
                        }
                    }).catch(err => {
                        this.loading = false;
                        this.$notify.error({
                            title:'验证码发送失败',
                            message:err.message
                        })
                    });
                    
                }
            });
            
            
            
        },
        // 倒计时
        timeCount() {
            let interval = setInterval(() => {
                this.count --;
                console.log(this.count);
                if(this.count === -1) {
                    clearInterval(interval);
                    this.disabled = false;
                    this.count = 180;
                }
            }, 1000);
        },
        // 注册
        register(userData){
            this.$refs[userData].validate((valid) => {
                let user = this.$refs[userData].model;
                if(valid) {
                    this.loading = true;
                    this.$axios.post(util.API_HOST + '/user/register',{
                        email:user.mail,
                        code:user.code,
                        password:user.pwd
                    }).then(response => {
                        this.loading = false;
                        let result = response.data;
                        if(result.code === 200){
                            // 跳转至登录页
                            this.$router.push('/login');
                        } else {
                            this.$notify.error({
                                title:'注册失败',
                                message:result.message
                            });
                        }
                    }).catch(err => {
                        this.loading = false;
                        this.$notify.error({
                            title:'注册失败',
                            message:err.message
                        })
                    });

                }
            });
        }
    }
    
}
</script>

<style scoped>
    #register-main{
        background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;/*实现水平居中*/
        align-items:center; /*实现垂直居中*/
    }
    #register{
        width: 30%;
    }
    #register-title{
        text-align: center;padding-top: 5px;padding-bottom: 5px;
        font-family: Poppins;font-size: 40px;font-weight: 700;
    }

</style>